<template>
	<div>
		<div class="xmzl">
			<!-- 项目总览 头部 -->
			<el-menu
				style="width: 100%;height: 60px;background-color: rgb(245,245,245);border: #D1C2D8 solid 1px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 4px;"
				class="el-menu-demo" mode="horizontal">
				<el-menu-item class="el-icon-s-home" index="1" @click="welcome()">众筹首页</el-menu-item>
				<el-menu-item class="el-icon-menu" index="2" @click="xmzl()">项目总览</el-menu-item>
				<el-menu-item class="el-icon-edit-outline" index="3" @click="agree()">发起众筹</el-menu-item>
				<el-menu-item class="el-icon-s-custom" index="4" @click="user()">我的众筹</el-menu-item>
			</el-menu>

			<!-- 分类 -->
			<div class="xmzlfl">
				<div style="margin-left: 100px;height: 200px;">
					<div style="position: relative;bottom: 10px;">
						<!-- 大分类列表 -->
						<el-row style="height: 63px;">
							<p>大分类:</p>
							<div style="position: relative;left: 50px;bottom: 40px;">
								<el-button style="margin-left: 15px; height: 20px;width: 30px;font-size: 15px;display: inline;" plain
									type="danger" @click="showAllBigType()">
									<p style="position: relative;bottom: 20px;right: 15px;">全部</p>
								</el-button>
								<div v-for="fl in bigList" :key="fl" style="display: inline;">

									<el-button 
										style="margin-left: 15px; height: 20px;width: 30px;font-size: 15px;float: left;display: inline-block;"
										plain type="primary" plain @click="showSelectMintyByBId(fl.bigId)">
										<p style="position: relative;bottom: 20px;right: 15px;">{{fl.bigName}}</p>
									</el-button>
								</div>
							</div>
						</el-row>
					</div>
					<div style="position: relative;bottom: 10px;">
						<!-- 小分类列表 -->
						<el-row style="height: 63px;">
							<p style="position: relative;display: block;">小分类:</p>
							<div style="position: relative;left: 50px;bottom: 40px;">
								<div v-for="index in minList" :key="index" style="display: inline;">
									<el-button
										style="margin-left: 15px; text-align: center; height: 20px;width: 60px;font-size: 15px;float: left;display: inline-block;"
										plain type="primary" plain @click="showSelectMintyByMId(index.minId)">
										<p style="position: relative; bottom: 20px;right: 15px;">{{index.minName}}</p>
									</el-button>
								</div>
							</div>
						</el-row>
					</div>
					<div style="position: relative;bottom: 10px;">
						<el-row style="height: 63px;">
							<p style="position: relative;left: 15px;display: block;">状态:</p>
							<div style="position: relative;left: 65px;bottom: 40px;">
								<el-button @click="selectProjectByIstg(0)" style="height: 20px;width: 30px;font-size: 15px;" plain type="primary" plain>
									<p style="position: relative;bottom: 20px;right: 15px;">全部</p>
								</el-button>
								<el-button @click="selectProjectByIstg(4)" style="height: 20px;width: 50px;font-size: 15px;" plain type="warning" plain>
									<p style="position: relative;bottom: 20px;right: 15px;">众筹中</p>
								</el-button>
								<el-button @click="selectProjectByIstg(6)" style="height: 20px;width: 70px;font-size: 15px;" plain type="danger" plain>
									<p style="position: relative;bottom: 20px;right: 15px;">众筹成功</p>
								</el-button>
							</div>
						</el-row>
					</div>

					<div style="position: relative;bottom: 10px;">
						<el-row style="height: 63px;">
							<p style="position: relative;left: 15px;">排序:</p>
							<div style="position: relative;left:65px;bottom: 40px;">
								<el-button @click="selectProByTime()" style="height: 20px;width: 70px;font-size: 15px;" plain type="success" plain>
									<p style="position: relative;bottom: 20px;right: 15px;">最新上线</p>
								</el-button>
								<el-button @click="selectProOrderByMoney()" style="height: 20px;width: 70px;font-size: 15px;" plain type="warning" plain>
									<p style="position: relative;bottom: 20px;right: 15px;">金额最多</p>
								</el-button>
								<el-button @click="selectProOrderByPeople()" style="height: 20px;width: 70px;font-size: 15px;" plain type="danger" plain>
									<p style="position: relative;bottom: 20px;right: 15px;">支持最多</p>
								</el-button>
							</div>
						</el-row>
					</div>
				</div>
				<div
					style="position: relative;bottom: -30px; border-top: #D1C2D8 solid 1px; box-shadow-top: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 4px;background-color: rgb(245,245,245);height: 50px;">

					<p style="font-size: 14px;font-weight: 400;margin-left: 30px;">众筹项目</p>

					<div style="position: relative;left: 850px;bottom: 40px;">
						<el-input style="width: 15%;" v-model="sousuo" placeholder="请输入搜索内容"></el-input>
						<el-button @click="queryProjectAll()" class="el-icon-search" style="position: relative;left: 20px;">搜索</el-button>
					</div>
				</div>
			</div>

			<!-- 展示 -->
			<div class="dibu">
				<div class="zhanshi"  :class="[ (index +1)  %  4 === 0 ? 'nop':'hasp' ]"   v-for="(o, index) in projectList" :key="o">
					<el-card  :body-style="{ padding: '0px' }" >
						<el-link @click="showProject(o.projectId)"><el-image
							 :style= "border-box"
						     :src="'http://localhost:8080/vueload?filename='+o.projectTouImg"
						     :fit="cover"></el-image>
						</el-link>
						<div style="padding: 10px;">
							<span style="color: #99A9BF;text-align: center;display: block;">{{o.projectName}}</span>
							<div>
								<!-- <time class="time">{{ currentDate }}</time> -->
								<div>
									<p style="float: left;font-size: 10px;" class="el-icon-user-solid">{{o.peoples}}</p>
									<p style="float: right;font-size: 10px;" class="el-icon-date">{{o.projectEndTime}}</p>
								</div>
								<el-progress :percentage="o.percentage/100" :format="format"></el-progress>
								<p style="font-size: 10px;">已筹金额：{{o.numMoney}}</p>
								<!-- <el-button  type="text" class="button">操作按钮</el-button> -->
							</div>
						</div>
					</el-card>
				</div>
			</div>

			<div style="text-align: center;margin-top: 30px;margin-bottom: 30px;">
				<el-pagination background layout="prev, pager, next" :total="1000">
				</el-pagination>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.showAllBigType()
		},
		data() {
			return {
				sousuo: '',
				activeIndex: '2',
				bigList: [],
				selectBigList: [],
				minList: [],
				projectList: [],
				count: 0
			}
		},
		methods: {
			//首页
			welcome() {
				this.$router.push('/welcome')
			},
			//用户界面
			user() {
				this.$router.push('/user')
			},
			// 协议
			agree() {
				this.$router.push('/agree')
			},
			// 项目总览
			xmzl() {
				this.$router.push('/xmzl')
			},
			// 进度条
			format(percentage) {
				return percentage === 100 ? '筹满' : `${percentage}%`;
			},
			/* 查询所有大分类项目 */
			async showAllBigType() {
				var param = new URLSearchParams();
				var res = await this.$http.post("selectAllBigType", param);
				if (res.data.code == 200) {
					this.bigList = res.data.data
					/* 大分类下所有项目信息 */
					var res1 = await this.$http.post("selectProjectByIf", param);
					if (res1.data.code == 200) {
						this.projectList = res1.data.data.list
						console.log(this.projectList)
					} else {
						this.$message.error(res.data.message)
					}
					this.showAllminType()
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 查询所有小分类 */
			async showAllminType() {
				var param = new URLSearchParams();
				var res = await this.$http.post("selectAllMinType", param);
				if (res.data.code == 200) {
					this.minList = res.data.data
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 按照大分类id查询小分类项目信息 */
			async showSelectMintyByBId(val){
				var bigIds = [];
				bigIds.push(val);
				var param = new URLSearchParams();
				param.append("bigId", bigIds)
				var res = await this.$http.post("selectMinTypeByBigId", param);
				if (res.data.code == 200) {
					this.minList = res.data.data
					/* 大分类下所有项目信息 */
					var res1 = await this.$http.post("selectProjectByIf", param);
					if (res1.data.code == 200) {
						this.projectList = res1.data.data.list
						console.log(this.projectList)
					} else {
						this.$message.error(res.data.message)
					}
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 根据小分类Id查询项目信息 */
			async showSelectMintyByMId(val){
				var minIds = [];
				minIds.push(val);
				var param = new URLSearchParams();
				param.append("minId", minIds)
				var res = await this.$http.post("selectProjectByMinId", param);
				if (res.data.code == 200) {
					this.projectList = res.data.data.list
					console.log(this.projectList)
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 根据项目状态查询项目信息 */
			async selectProjectByIstg(val){
				var istgs = [];
				istgs.push(val);
				var param = new URLSearchParams();
				param.append("istg",istgs)
				var res = await this.$http.post("selectProjectByIstg",param);
				if (res.data.code == 200) {
					this.projectList = res.data.data.list
					console.log(this.projectList)
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 最新上架 */
			async selectProByTime(){
				var param = new URLSearchParams();
				var res = await this.$http.post("selectProByTime",param);
				if (res.data.code == 200) {
					this.projectList = res.data.data.list
					console.log(this.projectList)
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 根据项目id查看项目详情 */
			async showProject(val){
				window.sessionStorage.setItem("projectId",val)
				this.$router.push('/zhichi')
			},
			/* 按照项目金额查询项目列表信息 */
			async selectProOrderByMoney(){
				var param = new URLSearchParams();
				var res = await this.$http.post("selectProOrderByMoney",param);
				if (res.data.code == 200) {
					this.projectList = res.data.data.list
					console.log(this.projectList)
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 按照项目支持人数查询项目列表信息 */
			async selectProOrderByPeople(){
				var param = new URLSearchParams();
				var res = await this.$http.post("selectProOrderByPeople",param);
				if (res.data.code == 200) {
					this.projectList = res.data.data.list
					console.log(this.projectList)
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 按照名字模糊查询 */
			async queryProjectAll(){
				var param = new URLSearchParams();
				param.append("name",this.sousuo)
				var res = await this.$http.post("queryProjectAll",param);
				if (res.data.code == 200) {
					this.projectList = res.data.data.list
					console.log(this.projectList)
				} else {
					this.$message.error(res.data.message)
				}
			}
		}
	}
</script>

<style>
	.xmzl {
		width: 100%;
		margin-top: 20px;
		margin: 0 auto;
	}

	.xmzlfl {
		width: 100%;
		margin-top: 30px;
		height: 300px;
		margin: 0 auto;
		border-top: #D1C2D8 solid 1px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 4px;
	}

	time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: left;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.zhanshi {
		float: left;
		width:23%;
		min-height: 310px;
		box-sizing: border-box;
		margin-top: 20px;
	}

	.dibu {
		width: 108%;
		overflow: hidden;
		margin: 0 auto;
		
	}
	.nom{
		margin-right: 0;
	}
	.hasm{
		margin-right: 2%;
	}
	
	.hasp{
		padding-right: 1%;
		padding-left: 1%;
		
	}
	.nop{
		padding-right: 1%;
		padding-left: 1%;
	}
</style>
